<template>
  <div class="bar" ref="barRef"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, onUnmounted } from 'vue'
const barRef = ref()
const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  color: ['red', 'grey'],
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
  },
  yAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  },
  series: [
    {
      name: '线上观看人数',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230],
    },
    {
      name: '线下观看人数',
      type: 'bar',
      data: [19325, 23438, 31000, 121594, 134141, 681807, 18203, 23489, 29034, 104970, 131744, 630230],
    },
  ],
}
let myChart
const init = () => {
  const chartDom = barRef.value
  if (myChart) echarts.dispose(chartDom)
  myChart = echarts.init(chartDom)
  option && myChart.setOption(option)
}
onMounted(() => {
  init()
  window.addEventListener('resize', function () {
    init()
  })
})
onUnmounted(() => {
  window.removeEventListener('resize')
})
</script>

<style scoped lang="scss">
.bar {
  width: 100%;
  height: 600px;
}
</style>
